<template>
	<el-main>
		<!-- 查询条件 -->
		<el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
		<!-- 数据表格 -->
		<el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" row-key="id"
			default-expand-all :tree-props="{ children: 'children' }">
			<el-table-column prop="label" label="菜单名称"></el-table-column>
			<el-table-column prop="type" label="菜单类型">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.type == '0'" size="normal">目录</el-tag>
					<el-tag type="success" v-else-if="scope.row.type == '1'" size="normal">菜单</el-tag>
					<el-tag type="warning" v-else-if="scope.row.type == '2'" size="normal">按钮</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="icon" label="图标">
				<template slot-scope="scope">
					<i :class="scope.row.icon" v-if="scope.row.icon.includes('el-icon')" ></i>
					<svg-icon v-else :icon-class="scope.row.icon"></svg-icon>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="路由名称"></el-table-column>
			<el-table-column prop="path" label="路由地址"></el-table-column>
			<el-table-column label="操作" width="200" align="center">
				<template slot-scope="scope">
					<el-button icon="el-icon-edit-outline" type="primary" size="small" @click="handleEdit(scope.row)">编辑
					</el-button>
					<el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增或编辑弹框 -->
		<system-dialog :title="menuDialog.title" :width="menuDialog.width" :height="menuDialog.height"
			:visible="menuDialog.visible" @onClose="onClose" @onConfirm="onConfirm">
			<div slot="content">
				<el-form :model="menu" ref="menuForm" :rules="rules" label-width="80px" :inline="true" size="small">
					<el-row>
						<el-col :span="24">
							<el-form-item prop="type" label="菜单类型">
								<el-radio-group v-model="menu.type">
									<el-radio :label="0">目录</el-radio>
									<el-radio :label="1">菜单</el-radio>
									<el-radio :label="2">按钮</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item prop="parentName" size="small" label="所属菜单">
						<el-input @click.native="selectParentMenu" v-model="menu.parentName" :readonly="true"></el-input>
					</el-form-item>
					<el-form-item prop="label" size="small" label="菜单名称">
						<el-input v-model="menu.label"></el-input>
					</el-form-item>
					<el-form-item size="small" label="菜单图标">
						<el-input v-model="menu.icon"></el-input>
					</el-form-item>
					<el-form-item prop="name" v-if="menu.type == 1" size="small"  label="路由名称">
						<el-input v-model="menu.name"></el-input>
					</el-form-item>
					<el-form-item prop="path" v-if="menu.type != 2" size="small" label="路由地址">
						<el-input v-model="menu.path"></el-input>
					</el-form-item>
					<el-form-item prop="url" v-if="menu.type == 1" size="small" label="组件路径">
						<el-input v-model="menu.url"></el-input>
					</el-form-item>
					<el-form-item prop="code" size="small" label="权限字段">
						<el-input v-model="menu.code"></el-input>
					</el-form-item>
					<el-form-item size="small" label="菜单序号">
						<el-input v-model="menu.orderNum"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</system-dialog>

		
	</el-main>
</template>
<script>
//导入api脚本
import api from "@/api/menu";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';

export default {
    name: "menu",
	components:{
		SystemDialog
	},
    data() {
        return {
            tableData: [], //表格数据列表
			//弹出框相关属性
			menuDialog: {
				title: "",
				visible: false, //是否显示
				width: 560,
				height: 270,
			},
			//部门对象
			menu: {
				id: "",
				type: "",
				parentId: "",
				parentName: "",
				label: "",
				icon: "",
				name: "",
				path: "",
				url: "",
				code: "",
				orderNum: "",
			},
			//表单验证规则
			rules: {
				type: [{ required: true, trigger: "change", message: "请选择菜单类型" }],
				parentName: [{ required: true, trigger: "change", message: "请选择所属菜单"}],
				label: [{ required: true, trigger: "blur", message: "请输入菜单名称" }],
				name: [{ required: true, trigger: "blur", message: "请输入路由名称" }],
				path: [{ required: true, trigger: "blur", message: "请输入路由路径" }],
				url: [{ required: true, trigger: "blur", message: "请输入组件路径" }],
				code: [{ required: true, trigger: "blur", message: "请输入权限字段" }],
			},
		}
    },
    methods: {
        async search() {//列表
            //发送查询请求
            let res = await api.getMenuList();
            //判断是否存在数据
            if (res.success) {
                //获取数据
                this.tableData = res.data;
            }
        },
		onClose() {
			//关闭窗口
			this.menuDialog.visible = false;
		},
		onConfirm() {
			//表单验证
			this.$refs.menuForm.validate(async (valid) => {
				//如果验证通过
				if (valid) {
					//发送查询请求
					let res = null;
					if(this.menu.id==""){
						res = await api.add(this.menu);
					}else{
						res = await api.update(this.menu);
					}
					//判断是否存在数据
					if (res.success) {
						//获取数据
						this.menuDialog.visible = false;
						 //调用查询部门列表方法
						 this.search();
					}
				}
			});
		},
		openAddWindow() { //添加
			//清空表单数据
			this.$resetForm("menuForm", this.menu);
			//设置窗口标题
			this.menuDialog.title = "新增";
			//显示添加部门窗口
			this.menuDialog.visible = true;
		},
		handleEdit(row){
			//添加表单数据
			this.menu = row;
			//设置窗口标题
			this.menuDialog.title = "编辑";
			//显示添加部门窗口
			this.menuDialog.visible = true;
		},
		async handleDelete(row){
			//提示框
			let confirm = await this.$myconfirm("确定要删除该数据吗?");
			if(confirm){
				//删除
				let res = await api.delete({id:row.id});
				//判断是否存在数据
				if (res.success) {
					this.search();
				}
			}
		}
    },
    //初始化时执行
    created() {
        //调用查询部门列表方法
        this.search();
    }
};

</script>
<style lang="scss" scoped></style>
